<template>
  <el-form ref="form">
    <!--<div style="float: left;font-size: 18px;width: 100%;text-align: left;margin-bottom: 15px;">行业归属</div>-->
    <el-form-item>
      <div
        v-for="(item, index) in form"
        style="float: left; width: 100%; text-align: left"
      >
        <div
          style="
            font-size: 16px;
            text-align: left;
            margin-left: 30px;
            display: inline;
          "
        >
          产品类型
        </div>
        <el-input v-model="item.productType" placeholder="单行输入"></el-input>
        <el-button
          type="primary"
          v-if="index == 0"
          style="margin-left: 20px"
          @click="addOne()"
          >添 加</el-button
        >
        <el-button
          type="danger"
          v-else
          style="margin-left: 20px"
          @click="delOne(index)"
          >删 除</el-button
        >
        <div style="width: 100%; margin: 12px 0"></div>

        <div v-for="(item2, index2) in item.device">
          <div
            style="
              font-size: 14px;
              text-align: left;
              margin-left: 50px;
              width: 78%;
              display: inline;
            "
          >
            订单详情
          </div>
          <el-input
            v-model="item2.deviceName"
            placeholder="单行输入"
          ></el-input>
          <div
            style="
              font-size: 14px;
              text-align: left;
              margin-left: 20px;
              display: inline;
            "
          >
            结算比例 %
          </div>
          <el-input
            v-model="item2.settlementRatio"
            prop="sett"
            placeholder="单行输入"
          ></el-input>
          <el-button
            type="primary"
            v-if="index2 == 0"
            style="margin-left: 20px"
            @click="addOne2(index, index2)"
            >✚</el-button
          >
          <el-button
            type="danger"
            v-else
            style="margin-left: 20px"
            @click="delOne2(index, index2)"
            >—</el-button
          >
          <div style="width: 100%; margin: 10px 0"></div>
        </div>
        <div style="width: 100%; height: 10px; margin-bottom: 30px"></div>
      </div>
    </el-form-item>

    <el-divider></el-divider>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { EventBus } from "bus/mybus.js";
import {
  getProductTypeData,
  doProductTypeUpdate,
} from "../../crm/system/customOrder";

export default {
  name: "OrderCp",
  data() {
    return {
      form: [
        { productType: "", device: [{ deviceName: "", settlementRatio: "" }] },
      ],
      order_type: [{}],
    };
  },

  created() {
    this.getRequestData();
  },

  methods: {
    getRequestData() {
      //根据id  获取数据
      const payload = {};
      payload.operatorId = this.$store.state.operatorId;
      getProductTypeData(payload)
        .then((res) => {
          this.form = res.productTypes;
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },

    //新增管理区域..
    addOne() {
      this.form.push({ productType: "", device: [{}] });
    },
    //删除管理区域..
    delOne(index) {
      this.form.splice(index, 1);
    },

    addOne2(index, index2) {
      this.form[index].device.push({});
    },
    //删除管理区域..
    delOne2(index, index2) {
      this.form[index].device.splice(index2, 1);
    },

    //提交
    onSubmit() {
      this.$confirm("确认提交操作??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const payload = {};
          payload.operatorId = this.$store.state.operatorId;
          payload.productTypes = this.form;
          console.log(payload.productTypes);
          //处理数据
          for (let key in payload.productTypes) {
            if (payload.productTypes[key].device.length > 0) {
              let numberReg = /^[0-9]*$/;
              let emptyReg = /^\s*$/g;
              for (let key2 in payload.productTypes[key].device) {
                if (
                  !payload.productTypes[key].device[key2].deviceName ||
                  payload.productTypes[key].device[key2].deviceName == ""
                ) {
                  this.$message.error("设备名称必填");
                  return false;
                }
                if (
                  !numberReg.test(
                    payload.productTypes[key].device[key2].settlementRatio
                  ) ||
                  !payload.productTypes[key].device[key2].settlementRatio ||
                  payload.productTypes[key].device[key2].settlementRatio == ""
                ) {
                  this.$message.error("结算比例，请输入数字！请检查");
                  return false;
                }
              }
            }
          }

          doProductTypeUpdate(payload)
            .then((res) => {
              this.$message.success("操作成功");
            })
            .catch((err) => {
              EventBus.$emit("closeloading");
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.el-select:hover .el-input__inner {
  border-color: #c0c4cc;
  /* margin-right: 10px; */
}

.el-input {
  width: 15%;
  margin-left: 20px;
}
</style>